<template>
  <div class="table-role">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="EditADD">
          添加角色
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.institutionNumber"
            :label="item.institutionName"
            :value="item.institutionNumber">
          </el-option>
        </el-select>
        <el-button type="primary" @click="role" style="margin-left: 20px">条件查询</el-button>

      </vab-query-form-right-panel>
    </vab-query-form>

    <el-container style="height: 500px; border: 1px solid #eee">
<!--      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">-->
<!--        <el-menu :default-openeds="['1', '3']">-->
<!--          <el-submenu index="1">-->
<!--            <template slot="title"><i class="el-icon-user"></i>全部角色</template>-->
<!--            <el-menu-item-group>-->

<!--              <el-menu-item  ref="uname" @click.native="search($event)" :index="(index+'')"-->
<!--                             :data-index="item.roleCode"  :data-in="item.institutionNumber"      v-for="(item,index) in roles" :key="index">{{item.roleName}}</el-menu-item>-->

<!--            </el-menu-item-group>-->

<!--          </el-submenu>-->

<!--        </el-menu>-->


<!--      </el-aside>-->


      <el-container>
        <el-main>

        <el-table
          ref="tableSort"
          v-loading="listLoading"
          :data="list"



        >


<!--          <el-table-column show-overflow-tooltip label="账户名" width="200"  prop="institutionNumber">-->

<!--          </el-table-column>-->
          <el-table-column
            show-overflow-tooltip
            prop="institutionName"
            label="机构名称"

          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="角色码"
            prop="roleCode"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="角色名称"
            prop="roleName"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="备注信息"
            prop="remark"

          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="创建者"
            prop="creatorName"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="操作"
            width="280px"
            fixed="right"
          >

              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="text" @click="handleDelete(scope.$index, scope.row)" >
                  删除
                </el-button>
<!--                <el-button type="text"  @click="handleInfo(scope.$index, scope.row)">-->
<!--                  查看详情-->
<!--                </el-button>-->
                <el-button type="text" @click="handlelimits(scope.$index, scope.row)" >
                  分配权限
                </el-button>
              </template>

          </el-table-column>
        </el-table>

        <el-pagination
          :background="background"


          :total="total"
          :page-size="queryForm.limit"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"

    >

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="机构名称" prop="institutionNumber"   >
<!--          <el-input v-model.trim="form.institutionNumber" autocomplete="off"></el-input>-->
          <el-select
            style="width: 100%"
            v-model="form.institutionNumber"
            @change="change"
               width="400px"
            placeholder="机构名称">
            <el-option

              v-for="item in organss"
              :key="item.institutionNumber"
              :label="item.institutionName"
              :value="item.institutionNumber">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="角色码" prop="roleCode" >
          <el-input v-model.trim="form.roleCode" autocomplete="off"  ></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model.trim="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <el-input v-model.trim="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="SaveAdd('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisibles"
      width="500px"
      destroy-on-close
    >

      <el-form ref="form" :model="secondlist" :rules="rules" label-width="80px">



        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model.trim="secondlist.roleName" ></el-input>
        </el-form-item>

        <el-form-item label="备注信息" prop="remark">
          <el-input v-model.trim="secondlist.remark" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="Savedo">确 定</el-button>
      </div>
    </el-dialog>

    <roleInforEdit ref="roleinfo"></roleInforEdit>
    <limits ref="limits"></limits>
  </div>


</template>

<script>
    import { doEdit } from "@/api/role";
    import { add } from "@/api/role";
    import { search} from "../../../api/role";
    import { doDelete } from "../../../api/role";
    import roleInforEdit from "./components/roleInforEdit";
    import limits from "./components/limits";
    export default {
        name: "Role",
        components: {roleInforEdit,limits},
        data() {
            return {
                options:"",
                value:"",
                institutionNumber:"",
                organss:{
                    institutionNumber:"",
                },
                title: "添加角色",
                dialogFormVisible: false,
                dialogFormVisibles:false,
                background: true,
                listLoading: true,

                list: [

                ],
                roles:[],

                total: 0,
                secondlist: [

                ],
                organ: {
                    uname: ""
                },
                layout: "total, sizes, prev, pager, next, jumper",
                form: {
                    creator: "",
                    institutionNumber: "",
                    remark: "",
                    roleCode: "",
                    roleName: "",


                },

                rules: {
                    creator: [{required: true, trigger: "blur", message: "创建者"}],
                    institutionNumber: [{required: true, trigger: "blur", message: "机构编号"}],
                    remark: [{trigger: "blur", message: "备注信息"}],
                    roleCode: [{required: true, trigger: "blur", message: "角色码"}],
                    roleName: [{required: true, trigger: "blur", message: "角色名称"}],

                },
                queryForm: {
                    currPageNo: 1,
                    limit: 8,
                    name:"",
                    institutionNumber:""

                },
            };
    },
     created(){
         setTimeout(() => {
             this.organss = JSON.parse(localStorage.getItem("childinstitutionNumber"));
             this.options = JSON.parse(localStorage.getItem("childinstitutionNumber"));
             this.organs=localStorage.getItem("institutionNumber")
             this.form.institutionNumber=localStorage.getItem("institutionNumber")
           this.find()
           this.role()
         }, 1000);


     },
        methods:{
            token(){

            },
            EditADD(row) {

                this.dialogFormVisible = true;
            },
            close(){
                this.dialogFormVisible = false;
                this.dialogFormVisibles = false;
            },
            change(value){
                this.form.institutionNumber=value
            },
            SaveAdd(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {


                        console.log(this.organ)

                        doEdit(this.form).then(res =>{
                            if(res.code==200){
                                this.$baseMessage("添加成功");
                                 this.dialogFormVisible=false
                                this.find(this.form.institutionNumber);
                            }else {
                                return false;
                            }


                        })
                    } else {

                        return false;
                    }
                });

            },
            handleInfo(index,row) {

                 this.$refs["roleinfo"].showEdit(row);
            },
            handlelimits(index,row) {

                this.$refs["limits"].showEdit(row);
            },
            handleDelete(index,row) {
                console.log(row.institutionNumber)
                let institutionNumber =(row.institutionNumber)
                let roleCode =(row.roleCode)
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const { code,msg } = await doDelete(({institutionNumber,roleCode}));

                        if(code==200){
                            this.$baseMessage(msg, "success");
                            this.find();
                        }else
                        {
                            return false;
                        }

                    });
                }
            },
            Savedo() {
                console.log(this.secondlist.version)
                add(this.secondlist).then(res =>{
                    if(res.code==200){
                        this.$baseMessage("编辑成功");
                        this.dialogFormVisibles=false
                        this.find(this.secondlist.institutionNumber);

                    }else {
                        return false;
                    }


                })
            },
            handleEdit(index, row) {


                this.dialogFormVisibles= true;
                this.secondlist={
                    ...row,



                }


            },
            role(){
                this.listLoading = true;
                 this.queryForm.institutionNumber=this.value
                this.queryForm.currPageNo=1

                search(this.queryForm).then(res =>{
                    console.log(res)
                   this.list=res.data.data

                })
                setTimeout(() => {
                    this.listLoading = false;
                }, 500)
            },
            search(ev) {

                console.log(this.form.institutionNumber)
                this.queryForm.name = ev.target.dataset.index
                this.queryForm.institutionNumber = this.form.institutionNumber
                this.listLoading = true;
                this.queryForm.currPageNo=1
                search(this.queryForm).then(res => {
                    console.log(res.data.data)
                    this.list=res.data.data
                    this.total=res.data.total
                })
                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            },
            async find(institutionNumber) {
                console.log(institutionNumber)
                this.listLoading = true;
                if(institutionNumber==undefined){
                    this.queryForm.institutionNumber=this.form.institutionNumber
                }else {
                    this.queryForm.institutionNumber=institutionNumber
                }

                const { data, total } = await search(this.queryForm);
                this.list=data.data
                this.total=data.total
                console.log(data.data)


                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.find();
            },
            handleCurrentChange(val) {
                this.queryForm.currPageNo = val;
                this.find();
            },

        }
    }
</script>

<style scoped>

</style>
